<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>FunGIS.COM</title>
    <meta charset="UTF-8">
    <script src="/Public/js/tianditu.api.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <link rel="icon" href="/Public/imgs/H.ico">
    <style>
        #mapDiv {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="mapDiv"></div>

    <script>
        var map = new T.Map("mapDiv")
        map.disableAutoResize();
        var zoom = 5;
        map.centerAndZoom(new T.LngLat(103, 30), zoom);

        // const imageURL = "http://t0.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=5174fc271848db77b921f28bb7ce5e22"
        // const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });

        // map.addLayer(lay)

                var imageURL =
            "http://8.155.1.150:8080/geoserver/WMTS_F/gwc/service/wmts?" +
            "layer=WMTS_F%3ARIVER_SC&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng" +
            "&TileMatrix=EPSG%3A900913%3A{z}&TileRow={y}&TileCol={x}";


        const southWest = new T.LngLat(97.3474930541613, 25.960892467945655);
        const northEast = new T.LngLat(114.32544881665831, 34.620088235065964);
        const f_bounds = new T.LngLatBounds(southWest, northEast);
        var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18, bounds: f_bounds });
        lay.setZIndex(1000)
        map.addLayer(lay);

        const dpr = window.devicePixelRatio || 1;
        const mapContainer = document.getElementById('mapDiv');
        mapContainer.style.transform = `scale(${1 / dpr})`;
        mapContainer.style.transformOrigin = '0 0';
        mapContainer.style.width = `${mapContainer.offsetWidth * dpr}px`;
        mapContainer.style.height = `${mapContainer.offsetHeight * dpr}px`;

        var ctrl = new T.Control.MapType(
            { position: T_ANCHOR_BOTTOM_RIGHT }
        );
        map.addControl(ctrl);
        map.checkResize();


    </script>
</body>

</html>